<template>
  <div class="activityStencil">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 2 }">
      <a-card class="card" :bordered="false">
        <a-col :lg="8" :md="8" :sm="24">
          <a-input v-model="actTitle" placeholder="标题" />
        </a-col>
        <a-col :lg="3" :md="8" :sm="24">
          <a-button style="margin-left:10px" type="primary" @click="handleAdd">添加</a-button>
        </a-col>
      </a-card>
    </a-skeleton>
    <br>
    <a-card title="活动模板" class="card" :bordered="false">
      <div>
        <a-table
          :loading="activeLoading"
          :columns="columns"
          :dataSource="data"
          :rowKey="data => data.activeId"
        >
          <template slot="activeId" slot-scope="text">{{ text }}</template>
          <template v-for="col in ['activeTitle','dongdong','qq']" :slot="col" slot-scope="text, record">
            <div :key="col">
              <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record.activeId, col)"
              />

              <template v-else>{{ text }}</template>
            </div>
          </template>
          <template slot="handle" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a
                  style="margin-right:15px"
                  @click="() => save(record.activeId,record.activeTitle,record.qq,record.dongdong)"
                >
                  <a-button type="primary" size="small">保存</a-button>
                </a>
                <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.activeId)">
                  <a-button type="danger" size="small">取消</a-button>
                </a-popconfirm>
              </span>
              <span v-else>
                <a
                  style="margin-right:15px"
                  :disabled="editingKey !== ''"
                  @click="() => edit(record.activeId)"
                >
                  <a-button type="primary" size="small">修改</a-button>
                </a>
                <a-popconfirm title="确认删除吗?" @confirm="() => onDelete(record.activeId)">
                  <a-button type="danger" size="small">删除</a-button>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getActiveList, getAddAct, setActiveList, deleteActive } from '@/api/active'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'activeId',
    width: '10%',
    scopedSlots: { customRender: 'activeId' }
  },
  {
    title: '活动标题',
    dataIndex: 'activeTitle',
    width: '30%',
    scopedSlots: { customRender: 'activeTitle' }
  },
  {
    title: '咚咚',
    dataIndex: 'dongdong',
    width: '20%',
    scopedSlots: { customRender: 'dongdong' }
  },
  {
    title: 'QQ',
    dataIndex: 'qq',
    width: '20%',
    scopedSlots: { customRender: 'qq' }
  },
  {
    title: '操作',
    dataIndex: 'handle',
    scopedSlots: { customRender: 'handle' }
  }
]

const data = [
  {
    activeId: 0,
    activeTitle: '乐推1'
  }
]

export default {
  name: 'ActivityStencil',
  data () {
    this.cacheData = data.map(item => ({ ...item }))
    return {
      skeLoading: true,
      columns,
      activeLoading: false,
      data,
      editingKey: '',
      actTitle: ''
    }
  },

  computed: {},
  created () {
    this.getActiveList()
  },
  mounted () {},
  methods: {
    getActiveList () {
      this.activeLoading = true
      getActiveList({})
        .then(res => {
          this.skeLoading = false
          // console.log('res', res.result)
          this.data = res.result
          this.activeLoading = false
        })
        .catch(() => {
          console.log('null')
          this.skeLoading = false
          this.activeLoading = false
        })
    },
    getAddAct (val) {
      getAddAct({
        title: val
      })
        .then(res => {
          // console.log('res', res)
          this.getActiveList()
        })
        .catch(() => {
          console.log('null')
        })
    },
    setActiveList (key, val, qq, dongdong) {
      setActiveList({
        id: key,
        title: val,
        qq: qq,
        dongdong: dongdong
      })
        .then(res => {
          // console.log('res', res)
          this.getActiveList()
        })
        .catch(() => {
          console.log('null')
        })
    },
    deleteActive (val) {
      deleteActive({
        id: val
      })
        .then(res => {
          // console.log('res', res)
          this.getActiveList()
        })
        .catch(() => {
          console.log('null')
        })
    },

    handleAdd () {
      if (this.actTitle !== '') {
        // const count = Math.floor(Math.random() * 10000 + 1)
        // const { data, actTitle } = this
        // const newData = {
        //   activeId: count,
        //   activeTitle: actTitle
        // }
        // this.data = [...data, newData]
        // this.count = count + 1
        this.getAddAct(this.actTitle)
      } else {
        this.$message.info('标题不能为空!')
      }
    },

    onDelete (key) {
      this.deleteActive(key)
      //   const data1 = [...this.data]
      //   this.data = data1.filter(item => item.activeId !== key)
    },
    handleChange (value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.activeId)[0]
      // console.log('target', target)
      if (target) {
        target[column] = value
        // console.log('newData', newData)
        this.data = newData
      }
    },
    edit (key) {
      // console.log(key)
      const newData = [...this.data]
      const target = newData.filter(item => key === item.activeId)[0]
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save (key, val, qq, dondong) {
      // console.log('key', key)
      // console.log('val', val)
      // console.log('qq', qq)
      // console.log('dondong', dondong)
      this.setActiveList(key, val, qq, dondong)
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter(item => key === item.activeId)[0]
      const targetCache = newCacheData.filter(item => key === item.activeId)[0]
      if (target && targetCache) {
        // this.isiptShow = false// 显示ipt
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
    },
    cancel (key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.activeId)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.activeId)[0])
        delete target.editable
        this.data = newData
      }
    }
  }
}
</script>

<style lang='less' scoped>
.activityStencil {
  .activeHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    .activeAdd {
      width: 750px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .activeAdd-title {
        width: 500px;
      }
    }
    .activeHeadertips {
      color: rgb(194, 194, 189);
      margin-left: 50px;
    }
  }
}
</style>
